<div class="main">
    <div class="marking-notice">
        <p class="marking-notice-title">注意事项</p>
        <p>1、选择商品可以使用Excel导入，也可以直接搜索再选择，但是<span style="color:red;">两种方式不能同时使用</span></p>
        <p>2、批量导入的文件各位统一设定为Excel文件，每行输入一个woc</p>
        <p>3、导入条目限制为每次1w条，请注意导入数量</p>
    </div>
    <tabset class="marking-tab" #tabs>
        <tab heading="文字标签" (select)="selectActive(0)">
            <div class="marking-text-inp">
                <input type="text" class="form-control" style="margin-bottom: 10px;" placeholder="请输入文字" [(ngModel)]="condition.labelName"/>
                <input type="text" class="form-control goods-marklist-input goods-marklist-time" id="start1" placeholder="开始显示时间" style="width:160px; margin-right:10px;"
                    onclick="laydate({
                            elem: '#start1',
                            format: 'YYYY-MM-DD hh:mm:ss',
                            min: '', 
                            max: '2099-06-16', //最大日期
                            start: (new Date()).toLocaleDateString() +' ' + (new Date()).toTimeString(),
                            istime: true,
                            istoday: false,
                            choose: function(datas){
                                end1.min = datas; //开始日选好后，重置结束日的最小日期
                                end1.start = datas //将结束日的初始值设定为开始日
                            }
                        });">
                <input class="form-control goods-marklist-input goods-marklist-time" id="end1" placeholder="结束显示时间" style="width:160px;"
                    onclick="laydate({
                            elem: '#end1',
                            format: 'YYYY-MM-DD hh:mm:ss',
                            min: document.getElementById('start1').value.split(':')[0],
                            max: '2099-06-16',
                            start: (new Date()).toLocaleDateString() + ' 23:59:59',
                            istime: true,
                            istoday: false,
                            choose: function(datas){
                                start1.max = datas; //结束日选好后，充值开始日的最大日期
                            }
                        });">
            </div>
            <div class="text-sample-name">示例</div>
            <div class="text-sample">
                <div class="text-sample-img">
                    <div class="text-sample-text">商品图片</div>
                </div>
                <div class="text-sample-sign">【包邮】</div>
                <div class="text-sample-title">商品主标题</div>
            </div>
        </tab>
        <tab heading="图片标签" (select)="selectActive(1)">
            <div class="marking-img-inp">
                <div class="marking-img-firstLine">
                    <a class="action-btn">本地选择图片
                        <input type="file" style="display: inline-block;" class="inputFile" id="ImgUploader" ng2FileSelect [uploader]="ImgUploader" (change)="selectedFileOnChanged($event, ImgUploader)" >
                    </a>
                    <button class="action-btn" (click)="uploadFile(ImgUploader, 0)">上传</button>
                </div>
                <div class="marking-img-secondLine">
                    <input type="text" class="form-control goods-marklist-input goods-marklist-time" id="start2" placeholder="开始显示时间" style="width:160px; margin-right:10px;"
                        onclick="laydate({
                            elem: '#start2',
                            format: 'YYYY-MM-DD hh:mm:ss',
                            min: '', 
                            max: '2099-06-16', //最大日期
                            start: (new Date()).toLocaleDateString() +' ' + (new Date()).toTimeString(),
                            istime: true,
                            istoday: false,
                            choose: function(datas){
                                end1.min = datas; //开始日选好后，重置结束日的最小日期
                                end1.start = datas //将结束日的初始值设定为开始日
                            }
                        });">
                    <input class="form-control goods-marklist-input goods-marklist-time" id="end2" placeholder="结束显示时间" style="width:160px;"
                        onclick="laydate({
                            elem: '#end2',
                            format: 'YYYY-MM-DD hh:mm:ss',
                            min: document.getElementById('start2').value.split(':')[0],
                            max: '2099-06-16',
                            start: (new Date()).toLocaleDateString() + ' 23:59:59',
                            istime: true,
                            istoday: false
                        });">
                </div>
            </div>
            <div class="img-sample-name">示例</div>
            <div class="img-sample"></div>
        </tab>
    </tabset>
    <div class="marking-import">
        <div class="marking-import-title">直接导入</div>
        <div class="marking-import-label">参与活动商品:</div>
        <a class="action-btn">选择文件
            <input type="file" style="display: inline-block;" id="ExcelUploader" class="inputFile" ng2FileSelect [uploader]="ExcelUploader" (change)="selectedFileOnChanged($event, ExcelUploader)" >
        </a>
        <button class="action-btn" (click)="uploadFile(ExcelUploader, 1)">上传</button>
        <span class="marking-import-tip">(上传方式必须为excel)</span>
        <a href="../../../../../assets/goodsMark.xlsx" class="action-btn">下载模板</a>
    </div>
    <div class="marking-import">
        <div class="marking-import-title" style="margin: 5px 0;">选择商品</div>
        <input id="searchGoodsKeyWord" type="text" class="form-control" style="margin-bottom: 10px; width:20%;" placeholder="请输入woc码或销售名称" [(ngModel)]="filter.keyword"/>
        <button class="action-btn" (click)="searchGoods()">搜索</button>
        <div class="modal-body" *ngIf="rows.length>0">
            <div class="grid-header">
                <div class="grid-title" *ngFor="let column of columns">{{column.title}}</div>
            </div>
            <div class="grid-container">
                <div class="grid-item" *ngFor="let row of rows; let i = index" [ngClass]="{gridItemCheck: row.isChecked}">
                    <div class="grid-itemInfo" style="margin-left:10px;">{{row.sn}}</div>
                    <div class="grid-itemInfo" style="margin-left:10px;">{{row.name}}</div>
                    <div class="grid-itemInfo">
                        <button class="action-btn" *ngIf="!row.isChecked" id="rowsBtn{{i}}" (click)="selectGoods(i, row)">选择</button>
                        <button class="action-btn" *ngIf="row.isChecked" id="rowsBtn{{i}}">已选择</button>
                    </div>
                </div>
            </div>
            <pagination class="pagination-sm" [(ngModel)]="page" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage"
                [maxSize]="maxSize" [boundaryLinks]="true" [rotate]="false" [firstText]="localText.firstBtn" [lastText]="localText.lastBtn"
                [previousText]="localText.previousBtn" [nextText]="localText.nextBtn" (pageChanged)="searchGoods($event)" (numPages)="numPages = $event">
            </pagination>
            <pre class="card card-block card-header">页数: {{page}} / {{numPages}}</pre>
            <div class="grid-container selected-goods">
                <div class="grid-item" *ngFor="let row of condition.goodsSn; let i = index">
                    <div class="grid-itemInfo3">
                        <span (click)="removeGoods(row)"> ❌</span>
                    </div>
                    <div class="grid-itemInfo2" style="margin-left:10px;">{{row.sn}}</div>
                    <div class="grid-itemInfo2" style="margin-left:10px;">{{row.name}}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="marking-bottom">
        <button class="confirm-btn"
            nz-button 
            nzType="primary" 
            (click)="confirmAdd()"
            [nzLoading]="loading.confirm">确认添加</button>
    </div>
</div>